<template>

  <el-container class='home-container'>
    <myProjectNavBar></myProjectNavBar>
    <keep-alive>
      <myProjectMain></myProjectMain>
    </keep-alive>
    <el-footer height="40px">
      <myProjectFooter></myProjectFooter>
    </el-footer>
  </el-container>
</template>

<script>
import myProjectMain from './main.vue'
import myProjectNavBar from './NavBar.vue'
import myProjectFooter from './Footer.vue'
// 引入背景图

export default {
  data() {
    return {
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  components: {
    myProjectMain,
    myProjectNavBar,
    myProjectFooter
  },
  computed: {

  },
}
</script>

<style scoped>
.el-footer {
  background-color: rgba(84, 92, 100, 0.5);
}
.home-container {
  min-height: 100vh;
  height: 100%;
}
.background {
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px;
  padding: 0px;
  top: 0;
  width: 100%;
  height: 120vh;
  position: fixed;
  z-index:-1;
}

@media screen and (max-width: 768px) {
  .title {
    width: 100%;
    background-position-x: center;
    background-position-y: 0;
  }
}
</style>
